<head>
    <meta charset="utf-8">
    <title>DesignBox 注册</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui@2.12.0/lib/index.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
    <!-- <link rel="stylesheet" href="__CSS__/register.css" type="text/css" /> -->
    <link type="text/css" rel="stylesheet" href="__CSS__/login.css" />
    <script type="text/javascript" src="__JS__/register.js"></script>
</head>

<body>
    <div class="background" style="height: 630px;">
        <div class="zhifeiji">
            <img src="__IMG__/taiyang.png" alt="纸飞机" style="z-index:0;right: 30px;top: 5px;height: 50%;">
        </div>
        <div class="login_container" id="register" style="width: 450px;left: 32%;">
            <el-form label-position="left" :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="75px" class="demo-ruleForm">
                <el-form-item label="用户名:" prop="name">
                    <el-input v-model="ruleForm2.name" placeholder="10位以下中文、字母、数字"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="pass">
                    <el-input type="password" v-model="ruleForm2.pass" placeholder="6-16位字母、数字" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码:" prop="checkPass">
                    <el-input type="password" v-model="ruleForm2.checkPass" placeholder="两次密码必须输入一致" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="学号:">
                    <el-input v-model.number="ruleForm2.num" placeholder="请填写正确的学号"></el-input>
                </el-form-item>
                <el-form-item label="邮箱:" prop="email">
                    <el-input v-model="ruleForm2.email" placeholder="请填写正确的邮箱"></el-input>
                </el-form-item>
                <el-form-item label-width="20px" style="padding-top: 10px;">
                    <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
                    <el-button @click="resetForm('ruleForm2')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <script type="module">
        var vm = new Vue({
            el: '#register',
            data() {
                var checkUsernameNaN = function(rule, value, callback) {
                    if (!value) { return callback(new Error('用户名不能为空')); }
                    setTimeout(() => {
                        if (!isNaN(value)) {
                            console.log(value); callback(new Error('用户名不可是纯数字'));

                        } else { callback(); } }, 1000);
                };
                var validatePass = (rule, value, callback) => {
                    if (value === '') { callback(new Error('请输入密码')); }

                    else {
                        if (this.ruleForm2.checkPass !== '') {
                            this.$refs.ruleForm2.validateField('checkPass');
                        }
                        callback();
                    } };

                var validatePass2 = (rule, value, callback) => {
                    if (value === '') { callback(new Error('请再次输入密码')); }

                    else if (value !== this.ruleForm2.pass) {
                        callback(new Error('两次输入密码不一致!'));
                    } else { console.log('ok'); callback(); }
                };
                var checkEmail = (rule, value, callback) => {
                    console.log('checkemail')
                    if (value === '') { callback(new Error('请输入邮箱')); }

                    if (value != '') {
                        var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

                        if (!reg.test(value)) { callback(new Error('邮箱格式不正确')); }  else {
                        console.log('checkemail ok')
                        callback(); }
                    }
                };

                var nameexit = (rule, value,callback) => {
                    $.ajax({ type: "POST", async: false, cache: false,
                        url: "__PUBLIC__/index/index/checkRegister",
                        data: { username: this.ruleForm2.name },
                        success: function(result) { if (!result) { callback(new Error('用户名已存在')); }
                        else { console.log('nameexit ok');callback();

                        } } }); };
                return {
                    ruleForm2: { name: '', pass: '', checkPass: '', num: '', email: '' },
                    rules2: { name: [{ validator: checkUsernameNaN, trigger: 'blur' }, { validator: nameexit, trigger: 'blur' }],
                        pass: [{ validator: validatePass, trigger: 'blur' }, { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }],
                        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
                        email: [{ validator: checkEmail, trigger: 'blur' }] } }; },
            methods: {
                submitForm(formName) { console.log('')
        this.$refs[formName].validate((valid) => {
                    console.log(valid,'valid')
                    if (valid) {
            $.ajax({ type: "POST", url: "__PUBLIC__/index/index/afterRegister", data: { username: this.ruleForm2.name, password1: this.ruleForm2.pass, stuNo: this.ruleForm2.num, email: this.ruleForm2.email
        }, success: function(response) { document.write(response) } }); } else { console.log('error submit!!'); } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } })
    </script>
</body>